<template>
  <el-menu
    :default-active="activeMenu"
    class="sidebar-menu"
    :collapse="isCollapse"
    background-color="#304156"
    text-color="#bfcbd9"
    active-text-color="#409EFF"
    router
    unique-opened
  >
    <div class="logo-box">
      <span class="logo-title">国护考勤系统</span>
    </div>

    <el-menu-item index="/home" class="menu-item">
      <i class="el-icon-s-home" style="color: #409eff"></i>
      <span slot="title">首页</span>
    </el-menu-item>

    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-user"></i>
        <span>考勤管理</span>
      </template>
      <el-menu-item index="/attendance/daily">日常考勤</el-menu-item>
      <el-menu-item index="/attendance/leave">请假管理</el-menu-item>
      <el-menu-item index="/attendance/overtime">加班管理</el-menu-item>
    </el-submenu>

    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-s-custom"></i>
        <span>人员管理</span>
      </template>
      <el-menu-item index="/staff/list">护士管理</el-menu-item>
      <el-menu-item index="/staff/schedule">排班管理</el-menu-item>
    </el-submenu>

    <el-submenu index="3">
      <template slot="title">
        <i class="el-icon-setting"></i>
        <span>系统设置</span>
      </template>
      <el-menu-item index="/settings/department">部门管理</el-menu-item>
      <el-menu-item index="/settings/role">角色权限</el-menu-item>
      <el-menu-item index="/settings/system">系统参数</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  name: "Side-Bar",
  props: {
    isCollapse: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    activeMenu() {
      return this.$route.path;
    },
  },
};
</script>

<style scoped>
.sidebar-menu {
  height: 100%;
  border-right: none;
  background-color: #304156 !important;
}

.sidebar-menu:not(.el-menu--collapse) {
  width: 200px;
}

.logo-box {
  height: 50px;
  line-height: 50px;
  background: #304156;
  padding: 0 15px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #1f2d3d;
}

.logo-title {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  margin-left: 10px;
  white-space: nowrap;
  overflow: hidden;
}

/* 重置菜单样式 */
.el-menu {
  border-right: none !important;
}

/* 菜单项样式 */
.el-menu-item {
  height: 50px !important;
  line-height: 50px !important;
  margin: 4px 0;
}

.el-submenu ::v-deep .el-submenu__title {
  height: 50px !important;
  line-height: 50px !important;
  margin: 4px 0;
}

/* 图标样式 */
.el-menu-item i,
.el-submenu__title i {
  margin-right: 12px;
  font-size: 18px;
  width: 24px;
  text-align: center;
}

/* 激活状态 */
.el-menu-item.is-active {
  background-color: #263445 !important;
  color: #409eff !important;
}

/* 悬停状态 */
.el-menu-item:hover,
.el-submenu__title:hover {
  background-color: #263445 !important;
}

/* 子菜单样式 */
.el-submenu ::v-deep .el-menu {
  background-color: #1f2d3d !important;
}

.el-submenu ::v-deep .el-menu-item {
  background-color: #1f2d3d !important;
  padding-left: 48px !important;
  min-width: 200px;
}

.el-submenu ::v-deep .el-menu-item:hover {
  background-color: #001528 !important;
}

/* 展开箭头 */
.el-submenu ::v-deep .el-submenu__title .el-submenu__icon-arrow {
  color: #909399;
}

/* 图标颜色 */
.el-menu-item i.el-icon-s-home {
  color: #409eff;
}

.el-submenu:nth-child(2) i {
  color: #67c23a;
}

.el-submenu:nth-child(3) i {
  color: #e6a23c;
}

.el-submenu:nth-child(4) i {
  color: #f56c6c;
}
</style>
